<template>
  <div class="home-container">
    <!-- 欢迎信息 -->
    <div class="welcome-section">
      <div class="welcome-header">
        <el-icon><UserFilled /></el-icon>
        <span>欢迎回来，{{ userInfo.name }}</span>
      </div>
      <div class="welcome-time">
        <el-icon><Timer /></el-icon>
        <span>{{ currentTime }}</span>
      </div>
    </div>

    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="data-overview">
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <div class="data-card">
            <div class="card-icon" style="background-color: #409EFF">
              <el-icon><House /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">酒店总数</div>
              <div class="card-value">{{ statistics.hotelCount }}</div>
              <div class="card-compare">
                较上月 <span style="color: #67C23A">+{{ statistics.hotelIncrease }}%</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <div class="data-card">
            <div class="card-icon" style="background-color: #67C23A">
              <el-icon><Calendar /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">今日预订</div>
              <div class="card-value">{{ statistics.todayBookings }}</div>
              <div class="card-compare">
                较昨日 <span :style="{ color: statistics.bookingTrend >= 0 ? '#67C23A' : '#F56C6C' }">
                  {{ statistics.bookingTrend >= 0 ? '+' : '' }}{{ statistics.bookingTrend }}%
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <div class="data-card">
            <div class="card-icon" style="background-color: #E6A23C">
              <el-icon><User /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">注册用户</div>
              <div class="card-value">{{ statistics.userCount }}</div>
              <div class="card-compare">
                本周新增 <span style="color: #67C23A">+{{ statistics.newUsers }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <div class="data-card">
            <div class="card-icon" style="background-color: #F56C6C">
              <el-icon><Money /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">营业额</div>
              <div class="card-value">¥{{ statistics.revenue }}</div>
              <div class="card-compare">
                较上月 <span :style="{ color: statistics.revenueTrend >= 0 ? '#67C23A' : '#F56C6C' }">
                  {{ statistics.revenueTrend >= 0 ? '+' : '' }}{{ statistics.revenueTrend }}%
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作区 -->
    <el-row :gutter="20" class="quick-access">
      <el-col :span="16">
        <el-card class="feature-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          <div class="quick-actions">
            <div class="action-item" @click="$router.push('/manager/hotel')">
              <el-icon><House /></el-icon>
              <span>酒店管理</span>
            </div>
            <div class="action-item" @click="$router.push('/manager/room')">
              <el-icon><Box /></el-icon>
              <span>房间管理</span>
            </div>
            <div class="action-item" @click="$router.push('/manager/booking')">
              <el-icon><Calendar /></el-icon>
              <span>酒店预订</span>
            </div>
            <div class="action-item" @click="$router.push('/manager/customer')">
              <el-icon><User /></el-icon>
              <span>客户信息管理</span>
            </div>
            <div class="action-item" @click="$router.push('/manager/data')">
              <el-icon><DataLine /></el-icon>
              <span>数据统计</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="system-info" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>系统信息</span>
            </div>
          </template>
          <div class="info-list">
            <div class="info-item">
              <span class="label">系统版本</span>
              <span class="value">v1.0.0</span>
            </div>
            <div class="info-item">
              <span class="label">服务器环境</span>
              <span class="value">Spring Boot 3.0</span>
            </div>
            <div class="info-item">
              <span class="label">前端框架</span>
              <span class="value">Vue 3 + Element Plus</span>
            </div>
            <div class="info-item">
              <span class="label">数据库</span>
              <span class="value">MySQL 9.0</span>
            </div>
            <div class="info-item">
              <span class="label">数据库管理工具</span>
              <span class="value">Navicat Premium 17</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'

const router = useRouter()

// 用户信息
const userInfo = reactive({
  name: JSON.parse(localStorage.getItem('xm-pro-user'))?.name || '管理员'
})

// 当前时间
const currentTime = ref('')
let timer = null

const updateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  const week = ['日', '一', '二', '三', '四', '五', '六'][now.getDay()]
  
  currentTime.value = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} 星期${week}`
}

// 统计数据
const statistics = reactive({
  hotelCount: 0,
  hotelIncrease: 0,
  todayBookings: 0,
  bookingTrend: 0,
  userCount: 0,
  newUsers: 0,
  revenue: 0,
  revenueTrend: 0
})

// 获取统计数据
const loadStatistics = async () => {
  try {
    const res = await request.get('/statistics/homeOverview')
    if (res.code === '200') {
      Object.assign(statistics, res.data)
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
  loadStatistics()
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.welcome-section {
  background: linear-gradient(135deg, #409EFF 0%, #3c7fff 100%);
  color: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.welcome-header {
  font-size: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.welcome-time {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.9;
}

.data-overview {
  margin-bottom: 20px;
}

.data-card {
  display: flex;
  align-items: center;
  gap: 20px;
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.card-compare {
  font-size: 12px;
  color: #909399;
}

.quick-access {
  margin-bottom: 20px;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.action-item {
  width: 120px;
  height: 100px;
  background-color: #f5f7fa;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.action-item:hover {
  background-color: #ecf5ff;
  transform: translateY(-2px);
}

.action-item .el-icon {
  font-size: 24px;
  color: #409EFF;
}

.action-item span {
  font-size: 14px;
  color: #606266;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.info-item .label {
  color: #909399;
}

.info-item .value {
  color: #606266;
}
</style>